<template>
  <div class="layer-box">
    <el-button-group v-if="curMapIsShow">
      <el-button v-for="(item,index) in curMapDrawList" :key="index" @click="clickLayer(item)" size="medium"  :class="curMapDrawActive ==item.id ? 'active':''">{{item.name}}</el-button>
    </el-button-group>
    <!-- <el-button-group>
      <template v-for="(item,index) in curMapDrawList">
        <el-button 
          :class="curMapDrawActive ==item.id ? 'active':''"
          :key="index"
          @click="clickLayer(item)"
        >{{item.name}}</el-button>
      </template>
    </el-button-group> -->
    <!-- <ul v-if="curMapIsShow">
      <li v-for="(item,index) in curMapDraw" :key="index" :class="curMapDrawActive ==item.id ? 'active':''" @click="clickLayer(item)"><span></span><a href="javascript:void(0)">{{item.name}}</a></li>
    </ul> -->
  </div>
</template>

<script>
export default {
  name: 'tag-wrap',
  computed:{
    defaultMenu(){
      return this.$store.getters.defaultMenu
    },
    curBtnGroupActive(){
      return this.$store.getters.curBtnGroupActive
    },
    // eslint-disable-next-line vue/return-in-computed-property
    curMapDrawList(){
      if(this.defaultMenu == 2){
        return this.$store.getters['map/curMapDrawList'].mapDrawPop
      }else if(this.defaultMenu == 3){
        if(this.curBtnGroupActive == '1'){
          return this.$store.getters['map/curMapDrawList'].mapDrawPop
        }else{
          // return this.$store.getters['map/curMapDrawList'].mapDrawOD
        }
      }else if(this.defaultMenu == 4){
        if(this.curBtnGroupActive == '1' || this.curBtnGroupActive == '4'){
          return this.$store.getters['map/curMapDrawList'].mapDrawTraffic
        }else{
          return this.$store.getters['map/curMapDrawList'].mapDrawBusSubway
        }
      }else if(this.defaultMenu == 5){
        if(this.curBtnGroupActive == '1'){
          return this.$store.getters['map/curMapDrawList'].mapDrawPlotLand
        }else if(this.curBtnGroupActive == '2'){
          return this.$store.getters['map/curMapDrawList'].mapDrawPlotFacity
        }
      }
    },
    curMapDrawActive(){
      return this.$store.getters['map/curMapDrawActive']
    },
    curMapIsShow(){
      return this.$store.getters['map/curMapIsShow']
    }
  },
  methods:{
   clickLayer(item){
     this.$store.dispatch('map/updateMapDraw',item);
   }
  }
}
</script>

<style lang="stylus" scoped>
@import url('//at.alicdn.com/t/font_1151041_12q9jh9v5q7.css') 
.layer-box
  position absolute
  z-index 50
  right 33%
  top 15px

  .layer-title
    height 45px
    background rgba(62,73,103,0.7)
    color #dbdee2 
    font-size 14px
    line-height 45px
    text-align center
    padding 0 12px
    cursor pointer
    border-radius 3px
    margin-bottom 10px

  ul
    margin 0
    padding 14px 0 13px
    background linear-gradient(to right, rgba(62,73,103,0.7), #303a58)
    height 18px
    overflow hidden


    li
      float left
      padding 0 12px
      border-right 1px dashed #dbdee2 

      a
        color #C0C4CC
        text-decoration none

    li:last-child
      border none

    li:hover,li.active
      a
        color #13ffd7

.el-button
    background: #303a58;
    border: 1px solid #303a58;
    color: #c0c4cc;       

.el-button:hover,.el-button.active
  color #13ffd7


</style>
